<template>
  <div>
    <!-- canvas 宽高比例尽量与视频比例保持一致。 -->
    <canvas id="canvas-1" style="width: 600px;"></canvas>
    <button @click="startPlayer">Start Video</button>
  </div>
</template>

<script>
import {onMounted} from 'vue';
import JSMpeg from 'jsmpeg-player'; // 确保导入正确

export default {
  name: 'RtspPlayer',
  setup() {
    const rtsp = 'rtsp://192.168.31.177:8554/test';
    let player;

    const startPlayer = () => {
      // 创建播放器
      if (!player) {
        player = new JSMpeg.Player("ws://localhost:9999/rtsp?url=" + btoa(rtsp), {
          canvas: document.getElementById("canvas-1"),
          autoplay: true // 可选：设置为 true 以便在创建后自动播放
        });
      }
    };

    return {
      startPlayer
    };
  }
};
</script>

<style scoped>
/* 在这里可以添加组件的样式 */
</style>
